<template>
  <div id="app">
    <div class="table-wraper">
      <div class="search">
        <div class="selectOption">
          <el-date-picker v-model="cashDateCheck" type="date" :editable='false' placeholder="按审核日期检索" :picker-options="pickerOptions0"></el-date-picker>
          <el-input v-model="cashAccountCheck" placeholder="按提现账号检索"></el-input>
          <el-input v-model="nickNameCheck" placeholder="按昵称检索"></el-input>
          <el-input v-model="userAccountCheck" placeholder="按用户账号检索"></el-input>
          <el-select v-model="verifyTypeCheck" clearable placeholder="按审核状态检索">
            <el-option v-for="item in verifyTypeList" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-button type="primary" @click='checkVerifyList(1)'>检索</el-button>
        </div>
      </div>
      <div class="main">
        <ul class="listTitle">
          <li v-for='item in titleList'>{{item.label}}</li>
        </ul>
        <ul class="dataList" v-for='(item,index) in tableData'>
          <li>{{index+1}}</li>
          <li><span @click='showUserInfo(index)'>{{item.nickname}}</span></li>
          <li>{{item.name}}</li>
          <li>{{item.accout}}</li>
          <li>{{item.applyMoney}}</li>
          <li>{{item.reallyMoney}}</li>
          <li>{{item.withdrawTime}}</li>
          <li>{{item.transTime}}</li>
          <li>{{item.withdrawState}}</li>
          <li><span @click='showUserBill(index)'>{{item.record}}</span></li>
          <li v-bind:class="{'record':item.isRecord}" @click='openRecord(index)'>{{item.remarks}} </li>
          <li>
            <el-button type="danger" v-show='item.withdrawState == "审核中"' @click='openUnpass(index)'>拒绝</el-button>
            <el-button type="success" v-show='item.withdrawState == "审核中"' @click='doSomething(index,2)'>通过</el-button>
            <el-button type="primary" v-show='item.withdrawState == "审核通过"' @click='doSomething(index,3)'>打款</el-button>
            <el-button type="primary" :disabled="true" v-show='item.withdrawState == "已到账"||item.withdrawState == "审核失败"'>已完成</el-button>
          </li>
        </ul>
      </div>
      <div class="block pagination" v-show='nullContentPagination'>
        <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="10" layout="prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
      <div class="nullContent" v-show='nullContent'>暂无数据</div>
    </div>
    <div class="bomb userInfo" v-show='userInfo'>
      <div class="bomb_header">
        <p>用户详情</p><span @click="hideUserInfo()"><img src="../../assets/images/icon_tanc_close@2x.png" width="10px" height="10"></span></div>
      <div class="bomb_content">
        <div class="userDetial">
          <p v-for='(item,index) in userDetial'>{{item.label}} : <span @click='openInviteBox'>{{item.val}}</span></p>
        </div>
      </div>
    </div>
    <div class="bomb userBill" v-show='userBill'>
      <div class="bomb_header">
        <p>用户账单</p><span @click="hideUserBill()"><img src="../../assets/images/icon_tanc_close@2x.png" width="10px" height="10"></span></div>
      <div class="bomb_content">
        <div class="billCheck">
          <el-button type="primary" class='checkOption checkButton' @click='checkBill'>筛选</el-button>
          <el-select v-model="payType" clearable placeholder="支出类型" class='checkOption'>
            <el-option v-for="item in payTypeList" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-select v-model="inCome" clearable placeholder="收益类型" class='checkOption'>
            <el-option v-for="item in inComeList" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <div class="block checkOption  el-select">
            <el-date-picker v-model="endDate" type="date" placeholder="结束日期" :picker-options="pickerOptions0" :editable='false'></el-date-picker>
          </div>
          <div class="block checkOption  el-select">
            <el-date-picker v-model="starDate" type="date" placeholder="开始日期" :picker-options="pickerOptions0" :editable='false'></el-date-picker>
          </div>
          <div class="clear"></div>
        </div>
        <ul class="billList">
          <li v-for='item in billTitle'>{{item.label}}</li>
        </ul>
        <div class="bill">
          <ul class="billDetialList" v-for='item in billDetial'>
            <li>{{item.subjects}}</li>
            <li :class='{lossMoney:item.type==1}'>{{item.money}}</li>
            <li>{{item.createDate}}</li>
          </ul>
          <div class="nullContent" v-show='nullContent'>暂无数据</div>
        </div>
      </div>
    </div>
    <div class="inviteBox" v-show='isInviteShow'><i class="el-icon-close userInfoClose" @click='hideInviteBox'></i>
      <h2>邀请统计</h2>
      <p>总邀请人数：<span> {{allInviteNum}}</span>激活人数：<span> {{activateNum}}</span>未激活人数：<span> {{unActivateNum}}</span></p>
      <div class="table">
        <ul class="invite-header">
          <li v-for='item in inviteList'>{{item.label}}</li>
        </ul>
        <div class="inviteListBox">
          <ul class="invite-list" v-for='(item,index) in inviteData'>
            <li>{{index+1}}</li>
            <li>{{item.userAccount}}</span>
            </li>
            <li>{{item.invitedTime | formatDate}}</li>
            <li>{{item.status | formatType}}</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="layer" v-show='layer'></div>
    <el-dialog title="拒绝理由" v-model="dialogVisible" size="tiny">
      <el-input v-model="unpassReason" placeholder="请输入拒绝理由">
      </el-input><span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="unpass" style='margin-left:10px;'>确 定</el-button>      
      <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import {
    mapActions,
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        tableData: [],
        userDetial: [],
        inviteData: [],
        inviteList: this.$store.state.verify.inviteList,
        titleList: this.$store.state.verify.titleList,
        inComeList: this.$store.state.verify.inComeList,
        payTypeList: this.$store.state.verify.payTypeList,
        billTitle: this.$store.state.verify.billTitle,
        verifyTypeList: this.$store.state.verify.verifyTypeList,
        billDetial: [],
        currentPage: 1,
        total: 0,
        nickNameCheck: '',
        cashDateCheck: '',
        userAccountCheck: '',
        cashAccountCheck: '',
        verifyTypeCheck: '',
        userInfo: false,
        layer: false,
        userBill: false,
        dialogVisible: false,
        isInviteShow: false,
        nullContent: false,
        nullContentPagination: false,
        starDate: '',
        endDate: '',
        inCome: '',
        payType: '',
        constUid: '',
        unpassReason: '',
        allInviteNum: '',
        activateNum: '',
        unActivateNum: '',
        selectIndexInviteNum: '',
        uid: '',
        id: '',
        pickerOptions0: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        }
      }
    },
    watch: {},
    methods: {
      // 获取审核列表
      getVerify(list) {
        this.$store.commit('showLoading');
        this.currentPage = list.pageNo;
        this.getVerifyList(list).then((data) => {
          this.$store.commit('hiddenLoading');
          console.log(data);
          if (data.code === 200) {
            this.nullContent = false;
            this.nullContentPagination = true;
            if (data.data.list.length == 0) {
              this.nullContent = true;
              this.nullContentPagination = false;
              this.tableData = data.data.list;
              return;
            }
            this.total = data.data.count;
            let d = data.data.list;
            for (let i = 0; i < d.length; i++) {
              d[i].applyMoney = d[i].applyMoney.toFixed(2);
              d[i].reallyMoney = d[i].reallyMoney.toFixed(2);
              d[i].withdrawState = Number(d[i].withdrawState);
              d[i].withdrawTime = this.formatDate(d[i].withdrawTime);
              d[i].transTime = d[i].transTime == null ? '' : this.formatDate(d[i].transTime);
              if (d[i].remarks == null) {
                d[i].isRecord = false;
              } else {
                d[i].isRecord = true;
              }
              d[i].remarks = d[i].remarks == null ? '-' : d[i].remarks;
              d[i].record = '账单';
              if (d[i].withdrawState == 1) {
                d[i].withdrawState = '审核中';
              } else if (d[i].withdrawState == 2) {
                d[i].withdrawState = '审核通过';
              } else if (d[i].withdrawState == 3) {
                d[i].withdrawState = '已到账';
              } else {
                d[i].withdrawState = '审核失败';
              }
            }
            this.tableData = d;
          } else {
            this.$message(data.message);
          }
        }).catch(msg => console.log(msg));
      },
      // 检索用户列表
      checkVerifyList(i) {
        let list = {
            token: sessionStorage.token,
            pageSize: 10,
            pageNo: i,
          },
          jsonFilter = {};
        if (this.cashDateCheck != "" && this.cashDateCheck != undefined) {
          jsonFilter.createDate = this.UnFormatDate(this.cashDateCheck) + " 00:00:00";
          jsonFilter.endCreateDate = this.UnFormatDate(this.cashDateCheck) + " 23:59:59";
        }
        if (this.verifyTypeCheck != "") {
          jsonFilter.withdrawState = this.verifyTypeCheck;
        }
        if (this.cashAccountCheck != "") {
          jsonFilter.account = this.cashAccountCheck;
        }
        if (this.userAccountCheck != "") {
          jsonFilter.phone = this.userAccountCheck;
        }
        if (this.nickNameCheck != "") {
          jsonFilter.nickname = this.nickNameCheck;
        }
        list.jsonFilter = JSON.stringify(jsonFilter);
        if (/[^0-9]/.test(this.cashAccountCheck) || /[^0-9]/.test(this.userAccountCheck)) {
          this.$message.warning('账号只能是数字!');
          return;
        }
        this.getVerify(list);
      },
      // 分页跳转
      handleCurrentChange(val) {
        this.currentPage = val;
        this.checkVerifyList(val)
      },
      // 打开用户详细信息
      showUserInfo(i) {
        this.selectIndex = i;
        let list = {
          userId: this.tableData[i].userId,
          token: sessionStorage.token
        }
        this.getUserInfoById(list).then((data) => {
          console.log(data);
          if (data.code === 200) {
            let dataList = data.data;
            this.selectIndexInviteNum = dataList.invitedNum;
            this.uid = dataList.uid;
            this.userDetial = [{
              label: '用户昵称',
              val: dataList.nickname
            }, {
              label: '姓名',
              val: dataList.name
            }, {
              label: '性别',
              val: dataList.sex
            }, {
              label: '账号',
              val: dataList.account
            }, {
              label: '经验值',
              val: dataList.integration
            }, {
              label: '等级',
              val: dataList.level
            }, {
              label: '余额',
              val: dataList.money
            }, {
              label: '所在地',
              val: dataList.address
            }, {
              label: '生日',
              val: dataList.birthday
            }, {
              label: '职业',
              val: dataList.profession
            }, {
              label: '兴趣',
              val: dataList.interest
            }, {
              label: '收益',
              val: dataList.privateIncome.toFixed(2)
            }, {
              label: '注册时间',
              val: this.formatDate(dataList.createDate)
            }, {
              label: '邀请人数',
              val: dataList.invitedNum
            }, {
              label: '邀请码',
              val: dataList.invitedCode
            }, {
              label: '我的邀请人',
              val: dataList.invitedPeople
            }, {
              label: '上次登录时间',
              val: this.formatDate(dataList.loginTime)
            }];
            this.userInfo = this.layer = true;
          } else {
            this.$message(data.message);
          }
        }).catch(msg => console.log(msg));
      },
      // 关闭用户详细信息
      hideUserInfo() {
        this.userInfo = this.layer = false;
      },
      // 打开账单信息
      showUserBill(i) {
        let userId = this.tableData[i].userId;
        this.constUid = this.tableData[i].userId;
        this.loadBill(userId);
        this.userBill = this.layer = true;
      },
      // 关闭账单信息
      hideUserBill() {
        this.userBill = this.layer = false;
      },
      // 筛选账单信息
      checkBill() {
        let uid = this.constUid,
          createDate = this.starDate,
          endCreateDate = this.endDate,
          inSubjects = this.inCome,
          outSubjects = this.payType;
        this.loadcheckBill(uid, createDate, endCreateDate, inSubjects, outSubjects);
      },
      // 加载账单
      loadBill(uid) {
        this.getUserCount({
          userId: uid
        }).then((data) => {
          console.log(data);
          if (data.code === 200) {
            this.nullContent = false;
            this.nullContentPagination = true;
            if (data.data.length == 0) {
              this.nullContent = true;
              this.nullContentPagination = false;
              this.billDetial = data.data;
              return;
            }
            let getData = data.data;
            for (let i = 0; i < getData.length; i++) {
              getData[i].createDate = this.formatDate(getData[i].createDate);
              let type = Number(getData[i].subjects);
              switch (
                type) {
                case 1:
                  getData[i].subjects = '系统红包收益'
                  break;
                case 2:
                  getData[i].subjects = '个人红包收益'
                  break;
                case 3:
                  getData[i].subjects = '邀请好友返利'
                  break;
                case 4:
                  getData[i].subjects = '系统奖励'
                  break;
                case 5:
                  getData[i].subjects = '发出的红包'
                  getData[i].money = -getData[i].money;
                  getData[i].type = 1;
                  break;
                case 6:
                  getData[i].subjects = '提现'
                  getData[i].money = -getData[i].money;
                  getData[i].type = 1;
                  break;
                case 7:
                  getData[i].subjects = '完成个人信息奖励'
                  break;
                case 8:
                  getData[i].subjects = '兑换奖励'
                  break;
                case 9:
                  getData[i].subjects = '分享收益'
                  break;
                case 10:
                  getData[i].subjects = '紅包金額退回'
                  break;
              }
            }
            this.billDetial = getData;
          } else {
            this.$message(data.message);
          }
        }).catch(msg => console.log(msg));
      },
      // 加载筛选账单
      loadcheckBill(uid, createDate, endCreateDate, inSubjects, outSubjects) {
        let list = {};
        list.userId = uid;
        if (createDate != '') {
          list.createDate = this.UnFormatDate(createDate);
        }
        if (endCreateDate != '') {
          list.endCreateDate = this.UnFormatDate(endCreateDate);
        }
        if (inSubjects != '') {
          list.inSubjects = inSubjects;
        }
        if (outSubjects != '') {
          list.outSubjects = outSubjects;
        }
        this.getUserCount(list).then((data) => {
          console.log(data);
          if (data.code === 200) {
            this.nullContent = false;
            this.nullContentPagination = true;
            if (data.data.length == 0) {
              this.nullContent = true;
              this.nullContentPagination = false;
              this.billDetial = data.data;
              return;
            }
            let getData = data.data;
            for (let i = 0; i < getData.length; i++) {
              getData[i].createDate = this.formatDate(getData[i].createDate);
              let type = Number(getData[i].subjects);
              switch (type) {
                case 1:
                  getData[i].subjects = '系统红包收益'
                  break;
                case 2:
                  getData[i].subjects = '个人红包收益'
                  break;
                case 3:
                  getData[i].subjects = '邀请好友返利'
                  break;
                case 4:
                  getData[i].subjects = '系统奖励'
                  break;
                case 5:
                  getData[i].subjects = '发出的红包'
                  getData[i].money = -getData[i].money;
                  getData[i].type = 1;
                  break;
                case 6:
                  getData[i].subjects = '提现'
                  getData[i].money = -getData[i].money;
                  getData[i].type = 1;
                  break;
                case 7:
                  getData[i].subjects = '完成个人信息奖励'
                  break;
                case 8:
                  getData[i].subjects = '兑换奖励'
                  break;
                case 9:
                  getData[i].subjects = '分享收益'
                  break;
                case 10:
                  getData[i].subjects = '紅包金額退回'
                  break;
              }
            }
            this.billDetial = getData;
          } else {
            this.$message(data.message);
          }
        }).catch(msg => console.log(msg));
      },
      // 打开拒绝理由
      openUnpass(i) {
        this.dialogVisible = true;
        this.id = this.tableData[i].id;
      },
      unpass() {
        let list = {
          token: sessionStorage.token,
          remarks: this.unpassReason,
          id: this.id,
          withdrawState: 4
        }
        if (this.unpassReason == '') {
          this.$message.warning('请输入拒绝理由!');
        } else {
          this.dialogVisible = false;
          this.doPass(list);
        }
      },
      // 1拒绝审核/2通过审核/3打款
      doSomething(i, o) {
        this.id = this.tableData[i].id;
        if (o == 2) {
          let list = {
            token: sessionStorage.token,
            id: this.id,
            withdrawState: 2
          }
          this.doPass(list);
        } else {
          this.$confirm('是否打款给该用户?', '打款', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info'
          }).then(() => {
            let list = {
              token: sessionStorage.token,
              id: this.id,
              withdrawState: 3
            }
            this.doPass(list);
          });
        }
      },
      doPass(list) {
        this.$store.commit('showLoading');
        this.doVerifyRequest(list).then((data) => {
          this.$store.commit('hiddenLoading');
          console.log(data);
          if (data.code === 200) {
            this.$message.success('操作成功!');
            this.checkVerifyList(this.currentPage);
          } else {
            this.$message(data.message);
          }
        }).catch(msg => console.log(msg));
      },
      // 打开邀请详细信息
      openInviteBox() {
        let num = this.selectIndexInviteNum;
        if (num <= 0) {
          return;
        } else {
          this.isInviteShow = true;
          this.getInvite();
        }
      }, // 关闭邀请信息
      hideInviteBox() {
        this.isInviteShow = false
      },
      getInvite() {
        let list = {
          token: sessionStorage.token,
          parentId: this.uid,
          pageNo: 1,
          pageSize: 9999
        }
        this.getInviteInfo(list).then((data) => {
          console.log(data);
          if (data.code === 200) {
            this.allInviteNum = data.data.count;
            this.activateNum = data.data.activate;
            this.unActivateNum = data.data.unActivate;
            this.inviteData = data.data.list;
          } else {
            this.$message(data.message);
          }
        }).catch(msg => console.log(msg));
      }, // 显示备注
      openRecord(i) {
        let content = this.tableData[i].remarks;
        if (content != '-') {
          this.$alert(content, '消息详情', {
            confirmButtonText: '确定'
          });
        }
      }, // 格式化日期
      formatDate(date) {
        let y,
          m,
          d,
          h,
          i,
          s,
          t = new Date(parseInt(date));
        y = t.getFullYear();
        m = t.getMonth() + 1;
        d = t.getDate();
        h = t.getHours();
        i = t.getMinutes();
        s = t.getSeconds();
        return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + ' ' + (h < 10 ? '0' + h : h) + ':' + (i < 10 ?
          '0' + i : i) + ':' + (s < 10 ? '0' + s : s)
      }, // 请求格式化日期
      UnFormatDate(date) {
        return new Date(date).toLocaleString().split(' ')[0].replace(/\ / / g, '-');
      },
      ...mapActions(['getVerifyList', 'getUserCount', 'getUserInfoById', 'doVerifyRequest', 'getInviteInfo'])
    },
    created: function() {
      // 获取用户列表
      let token = sessionStorage.token;
      let list = {
        pageSize: 10,
        pageNo: 1,
        token: token
      };
      this.getVerify(list);
    },
    filters: {
      // 格式化日期
      formatDate(date) {
        let y, m, d, h, i, s, t = new Date(parseInt(date));
        y = t.getFullYear();
        m = t.getMonth() + 1;
        d = t.getDate();
        h = t.getHours();
        i = t.getMinutes();
        s = t.getSeconds();
        return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + ' ' + (h < 10 ? '0' + h : h) + ':' + (i < 10 ?
          '0' + i : i) + ':' + (s < 10 ? '0' + s : s)
      }, // 邀请状态
      formatType(val) {
        return val == 1 ? '激活' : '未激活'
      }
    },
  }
</script>
<style scoped>
  #app {
    position: relative;
  }
  .table-wraper {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 5px;
  }
  .el-table {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
  }
  .pagination {
    width: 500px;
  }
  .balance div {
    color: rgb(0, 160, 233);
    cursor: pointer;
  }
  .search {
    width: 100%;
    padding: 6px 20px 0 0;
    background-color: #efefef;
    height: 48px;
    margin-bottom: 10px
  }
  .selectOption {
    float: right;
    text-align: right;
  }
  .search .checkRadio {
    float: left;
    width: 410px;
    text-align: left;
  }
  .checkRadio ul {
    display: inline-block;
    height: 35px;
    line-height: 35px;
  }
  .checkRadio li {
    float: left;
  }
  .el-input {
    width: 150px;
  }
  .locationCheck {
    width: 200px;
    margin-top: 3px;
  }
  .inviteListBox {
    position: absolute;
    top: 90px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: scroll
  }
  .inviteBox .bomb_content {
    height: 452px
  }
  .userInfo {
    width: 655px;
    height: 430px;
  }
  .userInfo .bomb_content {
    height: 387px;
    border: none;
  }
  .userInfo p {
    margin: 0;
  }
  .userDetial {
    width: 100%;
    height: 100%
  }
  .userDetial p {
    width: 46%;
    float: left;
    font-size: 15px;
    padding: 10px 0 10px 50px;
    text-align: left;
    color: #1F2D3D;
  }
  .userDetial p span {
    color: #324057;
  }
  .listTitle li:nth-child(1),
  .dataList li:nth-child(1) {
    width: 4%;
  }
  .listTitle li:nth-child(2),
  .dataList li:nth-child(2) {
    width: 10%;
  }
  .dataList li:nth-child(2) {
    cursor: pointer;
    padding: 0 5px;
    color: #35C885;
  }
  .listTitle li:nth-child(3),
  .dataList li:nth-child(3) {
    width: 7%;
  }
  .listTitle li:nth-child(4),
  .dataList li:nth-child(4) {
    width: 10%;
    padding: 0 5px;
  }
  .listTitle li:nth-child(5),
  .dataList li:nth-child(5) {
    width: 8%;
  }
  .listTitle li:nth-child(6),
  .dataList li:nth-child(6) {
    width: 8%;
  }
  .listTitle li:nth-child(7),
  .dataList li:nth-child(7) {
    width: 12%;
  }
  .listTitle li:nth-child(8),
  .dataList li:nth-child(8) {
    width: 12%;
  }
  .dataList li:nth-child(10) {
    cursor: pointer;
    color: #35C885;
  }
  .listTitle li:nth-child(9),
  .dataList li:nth-child(9) {
    width: 6%;
  }
  .listTitle li:nth-child(10),
  .dataList li:nth-child(10) {
    width: 6%;
  }
  .listTitle li:nth-child(11),
  .dataList li:nth-child(11) {
    width: 5%;
    padding: 0 5px;
  }
  .listTitle li:nth-child(12),
  .dataList li:nth-child(12) {
    width: 12%;
    border-right: none;
  }
  .userBill {
    width: 907px
  }
  .userBill .bomb_content {
    height: 452px
  }
  .userBill .el-date-editor.el-input {
    width: 150px
  }
  .userBill .el-select {
    margin-right: 10px
  }
  .billCheck {
    margin-top: 10px;
  }
  .checkOption {
    float: right;
  }
  .checkButton {
    margin: 2px 0 0 5px;
  }
  .bill {
    position: absolute;
    top: 96px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    font-size: 14px;
    color: #1f2d3d;
    background-color: #fff;
    box-sizing: border-box;
    text-align: center
  }
  .billList {
    margin-top: 10px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: #000;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    border: 1px solid#dddddd;
    background-color: #fafafa;
    box-sizing: border-box
  }
  .billDetialList {
    width: 50%;
    overflow: hidden;
    border-bottom: 1px solid#dfe6ec;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    float: left;
    border-right: 1px solid#dfe6ec;
    border-left: 1px solid#dfe6ec
  }
  .billDetialList:nth-child(2n) {
    border-left: none
  }
  .billList li,
  .billDetialList li {
    float: left
  }
  .billList li:nth-child(1),
  .billList li:nth-child(3),
  .billList li:nth-child(4),
  .billList li:nth-child(6) {
    width: 20%
  }
  .billList li:nth-child(2),
  .billList li:nth-child(5) {
    width: 10%
  }
  .billList li:nth-child(6) {
    border-right: none
  }
  .billDetialList li:nth-child(1) {
    width: 40%
  }
  .billDetialList li:nth-child(2) {
    width: 20%
  }
  .billDetialList li:nth-child(3) {
    width: 40%;
    border-right: none
  }
  .billClose {
    position: absolute;
    left: 50%;
    bottom: 10px;
    margin-left: -30px
  }
  .el-date-editor .el-input {
    width: 200px
  }
  ul {
    margin: 0
  }
  .el-button+.el-button {
    margin: 0
  }
  .userDetial p:nth-child(14) span {
    cursor: pointer;
    color: rgb(0, 160, 233);
  }
  .lossMoney {
    color: red;
  }
  .record {
    cursor: pointer;
  }
  .el-dialog .el-input {
    width: 80%;
  }
  .userInfoClose {
    position: absolute;
    top: 35px;
    right: 50px;
    cursor: pointer;
  }
  .inviteBox {
    width: 700px
  }
  .inviteBox p {
    margin: 0;
    height: 50px;
    line-height: 50px;
    text-align: left;
    padding-left: 20px;
    font-size: 16px
  }
  .invite-header {
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: #000;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    border: 1px solid#dddddd;
    background-color: #fafafa;
    box-sizing: border-box
  }
  .invite-list {
    width: 100%;
    height: 48px;
    line-height: 48px;
    color: #333333;
    font-size: 14px;
    text-align: center;
    box-sizing: border-box;
    border-bottom: 1px solid#dddddd;
    border-left: 1px solid#dddddd;
    border-right: 1px solid#dddddd
  }
  .invite-header li,
  .invite-list li {
    float: left
  }
  .invite-header li:nth-child(1),
  .invite-list li:nth-child(1) {
    width: 10%
  }
  .invite-header li:nth-child(2),
  .invite-list li:nth-child(2) {
    width: 30%
  }
  .invite-header li:nth-child(3),
  .invite-list li:nth-child(3) {
    width: 40%
  }
  .invite-header li:nth-child(4),
  .invite-list li:nth-child(4) {
    width: 20%
  }
  .inviteBox span {
    margin-right: 40px
  }
</style>
